<template>
  <div id="contain">
    <p>{{ state}}</p>
  <div style="margin: 20px;"></div>
  <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
    <el-form-item label="作者">
      <el-input v-model="formLabelAlign.author"></el-input>
    </el-form-item>
    <el-form-item label="标题">
      <el-input v-model="formLabelAlign.title"></el-input>
    </el-form-item>
    <el-form-item label="内容">
      <quill-editor
        v-model="formLabelAlign.content"
        ref="myQuillEditor"
      >
      </quill-editor>
    </el-form-item>
    <el-form-item label="日期">
      <el-input v-model="formLabelAlign.date"></el-input>
    </el-form-item>
    <el-form-item size="large" align="center">
      <el-button type="primary" @click="onSubmit()">{{state}}</el-button>
      <el-button @click="concel()">取消</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>
<script>
import {
  update,
  add} from '@/api/post'

export default {
  data () {
    return {
      labelPosition: 'top',
      formLabelAlign: {
        author: '',
        title: '',
        content: '',
        date: '',
        id: ''
      }
    }
  },
  props: {
    state: String
  },
  methods: {
    onSubmit () {
      const para = {
        title: this.formLabelAlign['title'],
        content: this.formLabelAlign['content'],
        author: this.formLabelAlign['author'],
        time: this.formLabelAlign['date'],
        id: this.formLabelAlign['id']
      }
      if (this.state === '编辑') {
        update(para).then(res => {
          this.$message({
            message: res.data,
            type: 'success',
            duration: 5 * 1000
          })
          this.$router.push({name: 'posttable'})
        })
      } else {
        add(para).then(res => {
          this.$message({
            message: res.data,
            type: 'success',
            duration: 5 * 1000
          })
          this.$router.push({name: 'posttable'})
        })
      }
    },
    concel () {
      this.$router.push('main/posttable')
      this.$message({
        message: '返回表头',
        type: 'success',
        duration: 5 * 1000
      })
    }
  },
  mounted () {
    this.state = this.$route.query.state
    this.formLabelAlign['title'] = this.$route.query.title
    this.formLabelAlign['content'] = this.$route.query.content
    this.formLabelAlign['author'] = this.$route.query.author
    this.formLabelAlign['date'] = this.$route.query.time
    this.formLabelAlign['id'] = this.$route.query.id
  }
}
</script>

<style scoped>
  #contain {
    width: 40%;
    height: 60%;
    margin: 100px auto;
  }
  #contain p {
    color: black;
    font-size: 25px;
    margin-bottom: 30px;
  }
</style>
